<template>
  <div class="page-bg">
    <c-title :hide="false" text="核销"></c-title>
    <div class="verification-page">
      <goods-card :goodsItem="orderGoods">
        <div class="card-footer flex-j-sb" slot="shoptoPay">
          <div class="title">到店付</div>
          <div class="price">
            ¥<span>{{ offlinePrice }}</span>
          </div>
        </div>
        <div class="flex-a-c attribute" slot="subscribe">
          <div class="num">购买数量：{{ orderGoods.total }}件</div>
          <div class="price">商品金额：¥{{ orderGoods.price }}</div>
        </div>
        <div class="flex-a-c ticket-no flex-j-sb" slot="ticketNo">
          <div class="num">券号</div>
          <div class="price">{{ couponSn }}</div>
        </div>
      </goods-card>
      <div class="mb20"></div>
    </div>
    <div>
      <purchase-notes :goodsNotes="buyNotice" :goodsDetail="packageDetail" :noticeDesc="noticeDesc" :priceDesc="priceDesc" :pluginSetting="pluginSetting"></purchase-notes>
    </div>

    <div class="mb140"></div>
    <div class="verifier-footer flex-a-c flex-j-c">
      <div class="verifier-btn flex-a-c flex-j-c" @click="onRefund(storeId)">确认核销</div>
    </div>
    <!-- <van-dialog id="van-dialog" /> -->
  </div>
</template>
<script>
import verification_controller from "./verification_controller.js";
export default verification_controller;
</script>
<style scoped>
.income-page ::v-deep .van-nav-bar {
  background-color: #ff3a00;
}

.income-page ::v-deep .van-nav-bar__title {
  color: #fff;
}

.income-page ::v-deep .van-nav-bar__left .van-button {
  background-color: #ff3a00 !important;
}

.income-page ::v-deep .van-nav-bar {
  border-bottom: 1px solid #ff3a00;
}

.income-page ::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
</style>
<style lang="scss" scoped>
.page-bg {
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/details_bg.png");
  background-size: 100% 10%;
  background-repeat: no-repeat;
}

.mb20 {
  height: 0.625rem;
  clear: both;
}

.mb140 {
  height: 4.375rem;
  clear: both;
}

.mb18 {
  height: 0.5625rem;
  clear: both;
}

.verification-page {
  padding: 1.0625rem 0.625rem 0 0.625rem;
}

.card-footer {
  margin: 1.0625rem 0 0 0;
  align-items: flex-end;

  .title {
    font-size: 0.9375rem;
    color: #222;
  }

  .price {
    font-size: 0.7163rem;
    color: #ff3a00;

    text {
      font-size: 1.0625rem;
    }
  }
}

.card-main .attribute {
  margin: 0.5rem 0 0 0;
  font-size: 0.7163rem;
  color: #979797;
}

.attribute .num {
  margin: 0 1.9375rem 0 0;
}

.verification-page .ticket-no {
  margin: 0.625rem 0 0 0;
  font-size: 0.9375rem;
  color: #222;
}

.verifier-footer {
  // width: 100%;
  width: 23.4375rem;
  height: 3.125rem;
  position: fixed;
  bottom: 0;
  background-color: #fff;

  .verifier-btn {
    width: 21.875rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
    font-size: 0.9375rem;
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    border-radius: 0.3125rem;
  }
}
</style>
